<template>
	  <div class="context" v-show="isshow">
		    <span class="tip">{{ text }}</span>
		  </div>
</template>
<script type="text/babel">
	export default {
		name: "Toast",
		props: {
			isshow: {
				type: Boolean,
			},
			text: {
				type: String,
			},
		},
		watch: {
			isshow(val) {
				if (val === true) {
					setTimeout(() => {
						this.isshow = false;
					}, 1000);
				}
			},
		},
	};
</script>
<style lang="less" scoped>
	.context {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 100;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 10000;

		.tip {
			background-color: rgba(40, 40, 40, 0.8);
			color: aliceblue;
			font-size: 14px;
			padding: 10px;
			border-radius: 5px;
		}
	}
</style>
